<template>
  <div class="">
    <div class="mask" @click="close()" />
    <div v-if="payStep === 1" class="paymodal codemodal">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" class="close iconfont" @click="close()">&#xe616;</a>
      </div>
      <div class="modal_body">
        <div v-if="orderInfo.payType === 2" class="tip">支付宝支付 {{ courseData.coursePrice.toFixed(2) }}元</div>
        <div v-else class="tip">微信支付 {{ courseData.coursePrice.toFixed(2) }}元</div>
        <div id="qrcode" class="code">
          <canvas id="canvas" />
        </div>
        <p v-if="orderInfo.payType === 2" class="tip2">请使用支付宝扫描<br> 二维码以完成订单</p>
        <p v-else class="tip2">请使用微信扫描<br> 二维码以完成订单</p>
        <div class="tip_panel">
          提示: <br>
          支付成功前请勿手动关闭页面 <br>
          二维码两小时内有效,请及时扫码支付
        </div>
      </div>
    </div>
    <div v-else-if="payStep === 0" class="paymodal">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" class="close iconfont" @click="close()">&#xe616;</a>
      </div>
      <div v-if="courseData" class="modal_body">
        <table class="table">
          <tr>
            <th>课程信息</th>
            <th>课程价格</th>
          </tr>
          <tr>
            <td>
              <div class="" style="width:300px;">
                <div v-if="courseData.courseLogo" class="img"><img :src="courseData.courseLogo" alt=""></div>
                <div class="name">{{ courseData.courseName }}</div>
              </div>
            </td>
            <td class="c_orange">¥{{ courseData.coursePrice }}</td>
          </tr>
        </table>
        <div class="remark">
          <label>备注:</label>
          <input v-model="order.remarkCus" type="text" placeholder="请输入你需要的备注">
        </div>
        <div class="pay_type">
          <input id="payType2" v-model="order.payType" type="radio" name="payType" value="2">
          <label for="payType2" class="pay pay_ali" />
          <input id="payType1" v-model="order.payType" type="radio" name="payType" value="1">
          <label for="payType1" class="pay pay_weixin" />
        </div>
      </div>
      <div class="modal_foot">
        <button class="solid_btn" :disabled="btntext === '正在提交...'" @click="submit">{{ btntext }}</button>
      </div>
    </div>
    <div v-else-if="payStep === 2" class="paymodal payrun">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" class="close iconfont" @click="close()">&#xe616;</a>
      </div>
      <div class="modal_body">
        <div class="icon iconfont c_green minIcon">&#xe69f;<span class="c_333 font_14">订单支付成功</span></div>
        <div class="center border_b">
          <a class="solid_btn order_btn" :href="'/course/'+courseData.courseId">立即学习</a>
          <a class="solid_btn order_btn" target="_blank" href="/account/order">查看订单</a>
        </div>
      </div>
    </div>
    <div v-else-if="payStep === 3" class="paymodal payrun">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" class="close iconfont" @click="close()">&#xe616;</a>
      </div>
      <div class="modal_body">
        <div class="icon iconfont c_red">&#xe68c;</div>
        <div class="tip">支付失败</div>
        <div class="center">
          <button class="solid_btn" @click="{payStep = 0}">重新购买</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { createOrder, orderInfoView } from '@/api/course.js'
import QRCode from 'qrcode'

export default {
  props: {
    data: {
      type: [Object, Array],
      default: null
    },
    no: {
      type: String,
      default: ''
    },
    isCourse: {
      type: Boolean
    }
  },
  data() {
    return {
      btntext: '下一步',
      checkPay: false,
      userInfo: this.$store.state.userInfo,
      courseData: '',
      order: {
        channelType: 1,
        courseId: 0,
        payType: 2,
        remarkCus: ''
      },
      orderInfo: null,
      payStep: 0,
      player: null
    }
  },
  mounted() {
    this.order.courseId = this.data.course.id
    this.courseData = this.data.course
  },
  methods: {
    reload() {
      window.location.reload()
    },
    close(event) {
      this.checkPay = true
      this.$emit('hidefun', event)
    },
    sel(cno) {
      this.checkPay = true
      this.$emit('btnClick', cno)
    },
    qrcode(url) {
      QRCode.toCanvas(document.getElementById('canvas'), url, {
        width: 180,
        height: 180
      }, function(error) {
        if (error) console.error(error)
      })
    },
    submit() {
      if (this.order.payType !== 2) {
        this.$msgBox({
          content: '暂不支持微信支付，请重新选择',
          isShowCancelBtn: false
        })
        return false
      }
      this.btntext = '正在提交...'
      createOrder(this.order).then(res => {
        this.btntext = '下一步'
        this.payStep = 1
        this.orderInfo = res
        this.$nextTick(() => {
          this.qrcode(res.payMessage)
        })
        this.getOrderInfo(res.orderNo)
      }).catch(() => {
        this.$msgBox({
          content: '系统繁忙，请稍后再试',
          isShowCancelBtn: false
        })
        this.btntext = '重新提交'
      })
    },
    getOrderInfo(orderNo) {
      if (this.checkPay) {
        return false
      }
      orderInfoView(orderNo).then(res => {
        if (res.orderStatus === 1) {
          // 待支付
          setTimeout(() => {
            this.getOrderInfo(orderNo)
          }, 1000)
        } else if (res.orderStatus === 2) {
          // 支付成功
          this.close()
          this.$msgBox({
            content: '购买成功',
            isShowCancelBtn: false
          }).then(res => {
            window.location.reload()
          }).catch(() => {
            window.location.reload()
          })
        } else {
          // 支付失败
          this.payStep = 3
        }
      })
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.payrun {
  min-height: 180px;

  .modal_body {
    padding: 30px;
    // height: 180px;
  }

  .ewm_img {
    width: 130px;
    display: block;
    margin: 10px auto 0;
    text-align: center;

    img {
      width: 130px;
      height: 130px;
    }

    p {
      line-height: 20px;
    }
  }

  .icon {
    font-size: 80px;
    width: 80px;
    margin: 0 auto;
    text-align: center;

    &.minIcon {
      font-size: 26px;
      width: 160px;

      span {
        position: relative;
        top: -5px;
        padding-left: 6px;
      }
    }
  }

  .order_btn {
    background: #fff;
    border: 1px solid rgb(180, 180, 180);
    color: #999;
    text-decoration: none;
    margin: 30px 5px;
  }

  .tip {
    font-size: 16px;
    text-align: center;
    padding-bottom: 20px;
  }

  .c_green {
    color: #05d005;
  }
}

.codemodal {
  .tip {
    margin: 30px auto 0;
    text-align: center;
    font-size: 16px;
  }

  .code {
    width: 182px;
    height: 182px;
    border: 1px solid #ddd;
    margin: 20px auto;
  }

  .tip2 {
    margin: 0 auto;
    width: 200px;
    padding: 13px 0 13px 70px;
    height: 66px;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    background: url() no-repeat 20px center #445f85;
  }

  .tip_panel {
    margin-top: 20px;
    padding: 20px;
    line-height: 20px;
    border-top: 1px solid #f1f1f1;
  }
}

.paymodal {
  position: fixed;
  left: 50%;
  top: 20%;
  z-index: 999;
  width: 482px;
  margin-left: -240px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;

  .modal_head {
    line-height: 46px;
    background-color: #f9f9f9;
    text-align: right;
    padding: 0 20px;

    .close {
      font-size: 14px;
    }
  }

  .modal_foot {
    border-top: 1px solid #e7e7eb;
    padding: 20px;
    text-align: center;
  }

  .table {
    width: 100%;
  }

  th {
    line-height: 36px;
    background-color: #f8f8f8;
  }

  td {
    vertical-align: middle;
    padding: 20px;
  }

  .name {
    width: 140px;
    padding-left: 12px;
    font-size: 16px;
  }

  .img {
    display: inline-block;
    width: 120px;
    padding: 0;
  }

  .name {
    display: inline-block;
    vertical-align: top;
  }

  .tabs {
    height: 48px;

    .tab {
      float: left;
      line-height: 46px;
      text-align: center;
      font-size: 16px;
      width: 50%;
    }

    span {
      cursor: default;
      display: inline-block;
      line-height: 46px;
    }

    .on {
      color: #ee7e00;

      span {
        border-bottom: 2px solid #ee7e00;
      }
    }
  }

  .remark {
    padding: 20px;
    overflow: hidden;
    font-size: 14px;
    border-top: 1px solid #f1f1f1;

    input {
      text-indent: .5em;
      height: 22px;
      width: 350px;
      border: none;
    }
  }

  .pay_type {
    padding: 20px;
    overflow: hidden;
    border-top: 1px solid #f1f1f1;

    input {
      display: none;

      &:checked + .pay {
        border-color: #ec7f00;
      }
    }
  }

  .pay {
    width: 218px;
    height: 50px;
    border: 1px solid #fff;
    float: left;
    background-repeat: no-repeat;
    background-position: center center;

    &.pay_ali {
      background-image: url();
    }

    &.pay_weixin {
      background-image: url();
    }
  }
}
</style>
